/**
 * Created by heshufen on 20/6/27.
 */
import React, {PureComponent} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import Horizontal from './Horizontal';
import Input from './Input';

export default class PhoneInput extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            countryCode: '86', value: this.props.value || '',
        };
    }

    getValue() {
        return this.state.value;
    }

    render() {
        return (
            <Horizontal style={[styles.container, this.props.style || this.props.style]}>
                <Text style={styles.countryCode}>+ {this.state.countryCode}</Text>
                <View style={styles.line}/>
                <Input placeholder={this.props.placeholder || '请输入手机号'}
                       style={styles.input}
                       placeholderColor="#c5c4c9"
                       keyboardType="numeric"
                       maxLength={11}
                       value={this.state.value}
                       onChangeText={(text) => this.setState({value: text})}
                />
            </Horizontal>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        width: 277,
        height: 47,
        alignItems: 'center',
        borderBottomWidth: 1,
        borderColor: 'rgba(0,0,0,0.08)',
    },
    countryCode: {
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 15,
        color: '#2b2b2b',
    },
    line: {
        marginLeft: 15,
        width: 2,
        height: 21,
        backgroundColor: '#ff2a7d',
    },
    input: {
        flex: 1,
        paddingLeft: 5,
        paddingRight: 10,
        height: 47,
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 16,
        color: '#2b2b2b',
    },
});

